<template>
    <a-row>
        <a-col :span="4">&nbsp;</a-col>
        <a-col :span="16">
            <a-card style="text-align: center;">
                <p>{{admin.name}}</p>
                <a-upload ref="uploadRef" :action="requestUrl.editUserFace.url" :show-file-list="false"
                          :disabled="upload.loading"
                          :auto-upload="true"
                          :headers="upload.headers"
                          :on-before-upload="upload.beforeUpload"
                          @success="uploadSuccess" @error="uploadError">
                    <template #upload-button>
                        <a-avatar trigger-type="mask">
                            <img :src="admin.userFace" alt="">
                            <template #trigger-icon>
                                <i class="fa fa-edit"></i>
                            </template>
                        </a-avatar>
                    </template>
                </a-upload>
                <p>手机号:{{admin.phone}}</p>
                <p>电话号:{{admin.telphone}}</p>
                <p>地址:{{admin.address}}</p>
                <p>
                    用户标签:
                    <a-tag v-for="(item,index) in admin.roles">{{item.name}}</a-tag>
                </p>
                <a-row>
                    <a-col :span="12">
                        <a-button type="primary">修改信息</a-button>
                    </a-col>
                    <a-col :span="12">
                        <a-button type="primary" status="danger" @click="editPassModal.open=true">修改密码</a-button>
                    </a-col>
                </a-row>
            </a-card>
        </a-col>
        <a-col :span="4">&nbsp;</a-col>
    </a-row>
    <a-modal @ok="editPass" @cancel="editPassModal.open=false" :visible="editPassModal.open" title="修改密码" fullscreen>
        <a-input v-model="editPassModal.data.oldPass" placeholder="旧密码"></a-input>
        <a-input v-model="editPassModal.data.pass" placeholder="新密码"></a-input>
        <a-input v-model="editPassModal.data.confirmPass" placeholder="确认密码"></a-input>
    </a-modal>
</template>

<script>
    export default {
        name: "",
        data() {
            return {
                admin: {},
                editPassModal: {
                    open: false,
                    data: {
                        oldPass: '',
                        pass: '',
                        confirmPass: ''
                    }
                },
                upload: {
                    loading: false,
                    headers: {
                        Authorization: window.localStorage.getItem("token")
                    },
                    beforeUpload: (file) => {
                        return new Promise(resolve => {
                            this.upload.loading = true
                            resolve(file)
                        })
                    }
                }
            }
        },
        methods: {
            getAdminInfo() {
                this.$get(this.requestUrl.getAdminInfo.url).then(res => {
                    this.admin = res.obj
                })
            },
            editPass() {
                if (this.editPassModal.data.pass !== this.editPassModal.data.confirmPass) {
                    this.$message.error('新密码和确认密码不一样')
                    return
                }
                this.editPassModal.data.adminId = this.admin.id
                this.$put(this.requestUrl.editPassword.url, this.editPassModal.data).then(res => {
                    if (res) {
                        //退出登录
                        this.$post(this.requestUrl.logout.url)
                        //清空用户信息
                        window.localStorage.removeItem("token")
                        window.localStorage.removeItem("user")
                        //清空菜单
                        this.$store.commit('initRoutes', [])
                        this.$router.replace('/')
                    }
                    this.editPassModal.open = false
                })
            },
            uploadSuccess(file) {
                if (file.response.code === 200) {
                    this.$message.success('上传成功')
                    this.getAdminInfo()
                } else {
                    this.$message.error(file.response.message)
                }
                this.upload.loading = false
            },
            uploadError() {
                this.$message.error('未知原因导致失败,请联系管理员')
                this.upload.loading = false
            }
        },
        mounted() {
            this.getAdminInfo()
        }
    }
</script>

<style scoped>

</style>